<template>
  <div>
    <!--标题-->
    <div class="search_list">
      <span class="search_text">标题：</span>
      <el-input size="small" v-model="title" placeholder="请输入标题"></el-input>
    </div>
    <!--相关项目-->
    <div class="search_list">
      <span class="search_text">相关项目：</span>
      <el-select
        v-model="relatedProjects"
        size="small"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        value-key="value"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
          v-for="item in relatedProjectsList"
          :key="item.value"
          :label="item.label"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <!--状态-->
    <div class="search_list">
      <span class="search_text">状态：</span>
      <el-select size="small" v-model="state" value-key="id" placeholder="请选择">
        <el-option v-for="item in stateList" :key="item.id" :label="item.name"
                   :value="item"></el-option>
      </el-select>
    </div>
    <!--时间-->
    <div class="search_list">
      <span class="search_text">时间：</span>
      <el-date-picker
        size="small"
        v-model="time"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期时间">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //标题
        title: '',
        //相关项目
        loading: false,
        relatedProjects: '',
        //状态
        state: '',
        //时间
        time: '',
      }
    },
    watch: {
      title() {
        this.$emit('title', this.title);
      },
      relatedProjects() {
        this.$emit('relatedProjects', this.relatedProjects);
      },
      state() {
        this.$emit('state', this.state);
      },
      time() {
        this.$emit('time', this.time);
      },
    },
    props: {
      relatedProjectsList: Array,
      stateList: Array,
    },
    methods: {
      //重置
      resetFun() {
        this.title = '';
        this.relatedProjects = '';
        this.state = '';
        this.time = '';
      },
      //相关项目
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          let list = []
          setTimeout(() => {
            this.loading = false;
            this.relatedProjects = list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .search_list {
    margin: 5px 15px 5px 0;
    display: inline-block;
    align-items: center;
    font-family: PingFangSC-Regular, PingFang SC;

    .search_text {
      font-size: 14px;
      font-weight: 400;
    }

    .el-input {
      width: 200px;
    }
  }
</style>
